// 配置
import Setting from '@/setting';
import { getFilterListByCanShowBtn, getButtonSizeByImport } from './utils';
import { isResponseSuccess } from '@/utils/bizUtils';
import Vue from 'vue';
const that = Vue.prototype;
/**
 * 获取一般按钮
 * @param { h } 要渲染的h函数
 * @param { item } 当前渲染按钮数据
*/
const getButton = (h, item) => {
  if (!item.method) { item.method = () => {}; } // 处理边界情况
  return <el-button
    type={ item.type || 'text' }
    size={ item.size }
    icon={item.icon}
    loading={item.loading}
    disabled={item.disabled}
    onClick={ () => { item.method() } }
  >{item.label}</el-button>
}
/**
 * 获取导入按钮
 * @param { h } 要渲染的h函数
 * @param { item } 当前渲染按钮数据
 * @param { data } 上传时附带的额外参数
 * @param { handleUploadSuccess } 导入成功回调方法
 * @param { handleUploadError } 导入错误回调方法
 * @param { handleBeforeUpload } 上传前回调方法
*/
const getImportButton = (h, item) => {
  if (item.showCondition === false) { return <span></span> }
  const buttonStyle = `margin: 0px 10px;`;
  const [ uploadSuccess, handleUploadError, handleBeforeUpload ] = getFinalMethods(item);
  const acceptFormats = item.accept || ['.xlsx', '.xls', '.csv'];
  let type = 'text'
  if (item.type && item.type !== 'import') type = item.type;
  return <el-upload
    data={item.data}
    style={buttonStyle}
    show-file-list={false}
    propsOnSuccess={(res) => { uploadSuccess(res) }}
    propsOnError={() => { handleUploadError() }}
    beforeUpload={file => handleBeforeUpload(file, acceptFormats)}
    accept={acceptFormats.join(', ')}
    action={`${Setting.uploadBaseURL}${item.action}`}
    disabled={item.disabled}
  >
    <el-button
      type={ type }
      size={getButtonSizeByImport(item)}
      disabled={item.disabled}
      loading={item.loading}
    >{item.label ?? '模板导入'}
    </el-button>
  </el-upload>
}
/**
 * 获取最终处理后的上传方法
 * @param { methods } 上传方法对象集
 * @param { loadingFn } 处理loading状态方法
 * @param { openLoading } 打开loading方法
 * @param { closeLoading } 关闭loading方法
*/
const getFinalMethods = (item) => {
  let { handleUploadSuccess = () => {}, handleUploadError, handleBeforeUpload } = item.methods ?? {};
  const openLoading = item.loadingFn ? () => { item.loadingFn(true); } : item.openLoading;
  const closeLoading = item.loadingFn ? () => { item.loadingFn(false); } : item.closeLoading;
  if (!handleUploadError) {
    handleUploadError = () => {
      closeLoading();
      that.$message.error('上传失败');
    }
  }
  const beforeUpload = (file) => {
    // 上传前进行格式校验
    const fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
    if (!['xlsx', 'xls', 'csv'].includes(fileType)) {
      that.$message.error('格式错误');
      return false;
    }
    if (handleBeforeUpload) {
      return handleBeforeUpload();
    }
    openLoading();
  }
  const uploadSuccess = res => {
    closeLoading();
    if (isResponseSuccess(res) || res?.code == 200) {
      that.$message.success('导入成功');
      handleUploadSuccess(res);
    } else {
      that.$message.error(res.retMessage || res.msg)
    }
  }
  return [ uploadSuccess, handleUploadError, beforeUpload ];
}
/**
 * 获取按钮操作栏
 * @param { h } 要渲染的h函数
 * @param { list } 渲染按钮集合
 * @param { showBtn } 渲染权限判断方法
 * @param { position } 按钮栏位置，默认最后
 * list 定义方法
 list = [
    {
      label: '', // 按钮名
      method: '', // 按钮执行方法
      size: '', // 按钮大小
      icon: '', // 按钮icon
      loading, // 按钮loading
      disabled, // 按钮disabled
      hasNotAuth, // 此按钮是否需要判断权限（默认不传就判断）
    },
    { // 特殊导入按钮
      label: '',
      methods: {
        handleUploadSuccess, // 上传成功
        handleUploadError, // 上传失败
        handleBeforeUpload, // 上传之前
        handleUploadFormatError // 上传格式验证失败
      },
      isImport: true, // 声明此item是导入按钮
      type: '', // 导入按钮类型
      action: '', // 上传路径（例如：sysback/update/product/structure/saveStructureToPage），开头一定不能加/
      closeLoading, // 上传关闭loading
      hasNotAuth, // 此按钮是否需要判断权限（默认不传就判断）
    },
    ...
  ]
*/

// 获取格式化的按钮item
const getFormatPropsItem = (btnItem, configs = {}) => {
  const size = configs?.size ?? 'mini' // 默认size
  const type = configs?.type ?? 'primary' // 默认type
  const hasAuth = configs?.hasAuth ?? false // 默认权限
  const newItem = {
    ...btnItem,
    ...configs,
    size: btnItem.size ?? size,
    type: btnItem.type ?? type,
    hasAuth: btnItem.hasAuth ?? hasAuth
  }
  return newItem
}

// 获取按钮栏（默认文本）集合
export const getBtnsBar = (h, list, showBtn, position = 'end') => {
  const canShowList = getFilterListByCanShowBtn(list, showBtn);
  return <el-row type="flex" justify={position}>{
    canShowList.map(item => {
      if (item.isImport || item.type === 'import') {
        return getImportButton(h, item)
      }
      return getButton(h, item)
    })
  }</el-row>
}

// 获取列表页面按钮栏渲染集合
export const getListPageBtnsBar = (h, list, showBtn, position = 'end', configs) => {
  const fillConfigList = list.map(item => getFormatPropsItem(item, configs))
  const canShowList = getFilterListByCanShowBtn(fillConfigList, showBtn);
  return <el-row type="flex" justify={position}>{
    canShowList.map(item => {
      if (item.isImport || item.type === 'import') {
        return getImportButton(h, item)
      }
      return getButton(h, item)
    })
  }</el-row>
}
